<template>
  <view class="classlist">
    <!-- 分类列表内容 -->
    <view class="content">
      <view 
        class="item" 
        v-for="(item, index) in wallpapers" 
        :key="item.id"
        @click="goToPreview(item)"
      >
        <image 
          :src="item.imageUrl" 
          mode="aspectFill"
          :lazy-load="true"
        ></image>
        <!-- 图片底部信息栏 -->
        <view class="info-bar" v-if="item.title">
          <text class="title">{{ item.title }}</text>
          <uni-icons type="heart" size="18" color="#fff"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 壁纸数据
const wallpapers = ref([
  { id: 1, imageUrl: "../../static/preview1.jpg", title: "自然风光" },
  { id: 2, imageUrl: "../../static/preview2.jpg", title: "城市夜景" },
  { id: 3, imageUrl: "../../static/preview3.jpg", title: "星空宇宙" },
  { id: 4, imageUrl: "../../static/preview4.jpg", title: "动物世界" },
  { id: 5, imageUrl: "../../static/preview5.jpg", title: "极简主义" },
  { id: 6, imageUrl: "../../static/preview6.jpg", title: "美食摄影" },
  { id: 7, imageUrl: "../../static/preview7.jpg", title: "旅行风景" },
  { id: 8, imageUrl: "../../static/preview8.jpg", title: "动漫插画" },
  { id: 9, imageUrl: "../../static/preview9.jpg", title: "抽象艺术" },
  { id: 10, imageUrl: "../../static/preview10.jpg", title: "科技未来" }
]);

// 跳转到预览页
const goToPreview = (item) => {
  uni.navigateTo({
    url: `/pages/preview/preview?id=${item.id}&title=${encodeURIComponent(item.title)}&imageUrl=${encodeURIComponent(item.imageUrl)}`
  });
};
</script>

<style lang="scss" scoped>
.classlist {
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10rpx;
    padding: 10rpx;
    
    .item {
      height: 500rpx;
      border-radius: 16rpx;
      overflow: hidden;
      position: relative;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
      
      &:active {
        transform: scale(0.98);
      }
      
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
      
      .info-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20rpx;
        background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title {
          color: #fff;
          font-size: 28rpx;
          font-weight: 500;
          max-width: 80%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>